<template>

  <a href="javascript:void(0)" @click="open(uuid, name)">编辑</a>

  <!-- 上传抽屉  -->
  <el-drawer class="ct" v-model="drawer" title="I am the title" :with-header="false">
  </el-drawer>
</template>

<script lang="ts" setup>
import {ref} from 'vue'

const drawer = ref(false)

import {ElMessage, ElMessageBox} from 'element-plus'
import {doPut} from '@/http/httpRequest';
import {defineEmits} from 'vue';
import {validateFileName, filePattern} from "@/tool/pattern"

const emit = defineEmits(['search']);
defineProps(['uuid', 'name']);

// 编辑弹窗弹出处理逻辑
const open = (uuid, name) => {
  const old_name = name
  console.log(uuid + "  " + name)
  ElMessageBox.prompt('输入新文件名', '编辑', {
    confirmButtonText: '修改',
    cancelButtonText: '取消',
    inputPattern: filePattern,
    inputErrorMessage: '文件名不合法',
    inputValue: name
  })
      .then(({value}) => {
        if (!validateFileName(value)) {
          console.log("修改 不合法")
          message("info", `文件名【 ${value}】 不合法`)
          return false
        }
        doPut("/file", {"uuid": uuid, "old_name": old_name, "new_name": value}).then((resp) => {
          if (resp.data.code == 200) {
            message("success", `新文件名:${resp.data.data}`)
          } else {
            message("info", `修改失败:${resp.data.message}`)
          }
          emit('search');
        })

      })
      .catch(() => {
        ElMessage({
          type: 'info',
          message: '取消修改',
        })
      })
}

// 消息提示
function message(type, msg) {
  ElMessage({
    type: type,
    message: msg,
  })
}

</script>
